/*
 * @Description: 单个文章列表组件
 * @Author: buwei.huang
 * @Date: 2019-06-21 11:29:46
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-28 18:11:55
 */
<template>
  <div
    class="article_item"
    :class="!isEnd ? 'separateLine' : ''"
    @click="goTopage(item.goTo)"
  >
    <img
      src="../assets/lazy.png"
      :class="'lazy_img' + index"
    />
    <!-- <img :src="item.bigPic" /> -->
    <p class="article_title_font">{{item.title}}</p>
    <p class="article_content_font">{{item.subTitle}}</p>
    <div class="article_dateReadingNum flex-h flex-hsb">
      <div>
        <i class="icon iconfont fontsize24 icon-time" />
        <span>{{item.createTime | timeFormat}}</span>
      </div>
      <div>
        <i class="icon iconfont fontsize24 icon-eye" />
        <span>{{item.pageNum}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { dateFtt } from 'vue-xiaobu-utils'
export default {
  props: {
    item: {
      type: Object,
      default: null
    },
    isEnd: {
      type: Boolean,
      default: null
    },
    index: {
      type: Number,
      default: null
    }
  },
  mounted() {
    document.querySelector('.lazy_img' + this.index).setAttribute('data-src', this.item.bigPic)
  },
  filters: {
    timeFormat(dateStr) {
      let date = new Date(dateStr) // 传入的时间
      let nowDate = new Date().getFullYear()
      if (dateStr.indexOf(String(nowDate)) !== -1) {
        return dateFtt('MM-dd', date) + ' ' + dateFtt('hh:mm', date)
      } else {
        return dateFtt('yyyy-MM-dd', date) + ' ' + dateFtt('hh:mm', date)
      }
    }
  },
  methods: {
    goTopage(goToUrl) {
      window.location.assign(goToUrl)
    }
  }
}
</script>
<style>
.article_item {
  margin-top: 20px;
  padding-bottom: 30px;
}
.article_item > img {
  width: 100%;
  height: 320px;
  border-radius: 10px;
}
.article_item .article_title_font {
  font-size: 16px; /* no */
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 45px;
  margin: 20px 0 10px;
}
.article_item .article_content_font {
  font-size: 12px; /* no */
  color: rgba(153, 153, 153, 1);
  line-height: 33px;
}
.article_item .article_dateReadingNum {
  margin-top: 24px;
  color: #ccc;
}
.separateLine {
  border-bottom: 1px solid #f2f5f6; /* no */
}
</style>
